<template>
  <div class="home">
    <p>{{ cSex }}</p>
    <img alt="Vue logo" src="../assets/logo.png">
    <p>{{ cSexStore }}</p>
    <p>age={{ this.$store.state.demo.userInfo.age }}</p>
    <p>age={{ number }}</p>
    <p>age={{ age }} == {{ viewsCount }}  === {{ viewsC }} === {{ todosALise }}</p>
    <p>=={{ userName }}</p>
    <p>=={{ isShow }}</p>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { getOptions } from '@/api/home'
import { mapState,mapGetters,mapActions } from 'vuex'

export default {
  // 当前文件名 --页面组件name
  name: 'Home',
  // 页面(组件)局部属性，必须return 一个对象
  data() {
    return getOptions(this);
  },
  // 页面(组件)外部属性，定义尽可能详细，尽量定义类型、默认值等
  props: {},
  // 页面(组件)依赖非公共组件
  components: {
    HelloWorld
  },
  // 页面(组件)混入
  mixins: [],
  // 页面(组件)计算属性
  computed: {
    cSex:function(){
        return this.sex + '加个字符串,算是改造'    
    },
    cSexStore:function(){
        return this.$store.state.demo.globalConfig.formSize + '加个字符串,算是改造'    
    },
    ...mapState({
      viewsCount(state) {
        return state.demo.userInfo.age
      },
      userName: state => state.demo.userInfo.name,
      viewsC: 'views',
    }),
    ...mapGetters('demo',{ //footerStatus指的是modules文件夹下的footerStatus.js模块
         isShow:'getToDo' //第一个isShow是我自定义的只要对应template里v-if="isShow"就行，
                         //第二个getToDo是对应的demo.js里的getters里的getToDo
      }),
    ...mapGetters({
      todosALise: 'number', // number 不是字符串，对应的是getter里面的一个方法名字 然后将这个方法名字重新取一个别名 todosALise
    }),
    ...mapGetters(['number', 'age']),
  },
  // 监控一个值的变换
  watch: {
    $route(to,from) {
      console.log('to=',to);
      if(to.name=='book'||to.name=='my'){
         this.$store.dispatch('demo/showFooterAsync',3) //这里改为'demo/showFooterAsync',
                                                   //意思是指fdemo.js里actions里的showFooterAsync方法
      }else{
         this.$store.dispatch('demo/showFooterAsync',7) //同上注释
      }
    }
  },
  // 页面(组件)方法
  methods: {
    ...mapActions(['invokePushItems']),
    
    ...mapActions('demo',{
         showFooterAsync:'showFooterAsync' 
      }),
  },
  // 页面(组件)实例初始化完成
  created() {},
  // 页面(组件)渲染完成
  mounted() {
    this.invokePushItems("true");  //调用mapActions['login'];
    this.showFooterAsync("truetrue");
  },
  // 页面(组件)更新后的处理
  updated() {},
  // keep-alive 组件激活时调用
  activated() {},
  // keep-alive 组件停用时调用
  deactivated() {},
  // 页面(组件)销毁
  destroyed() {}
}
</script>
